<template>
	<view class="content">
		<view class="title">设置新密码</view>
		<view class="title_content">8-16位，至少包含数字、字母和字符中的两类</view>
		<view class="cellBox">
			<view class="password">

				<input :maxlength="16" style="width: 100%;" v-model="pwd" placeholder="密码" :password="passwordEye">


				<image @click.stop='passwordEyeChange' v-show="passwordEye"
					src="http://106.14.56.171:15016/images/login/yj02.png" alt="" mode="widthFix">
				</image>
				<image @click.stop='passwordEyeChange' v-show="!passwordEye"
					src="http://106.14.56.171:15016/images/login/yj01.png" alt="" mode="widthFix">
				</image>
			</view>
		</view>
		<view class="password_auth">
			<view :class="line>1?'lineback':'line'"></view>
			<!-- <view :class="line>2?'lineback':'line'"></view> -->
			<view :class="line>3?'lineback':'line'"></view>
			<!-- <view>弱</view> -->
			<!-- <view>中</view> -->
			<!-- <view>强</view> -->
		</view>
		<view class="centerA">
			<text>弱</text>
			<text>强</text>
		</view>
		<view class="confirm" @click="confirm">
			确认
		</view>
	</view>
</template>

<script>
	export function checkStrong(sValue) {
		var modes = 0;
		//正则表达式验证符合要求的
		if (sValue.length < 1) return modes;
		if (/\d/.test(sValue)) modes++; //数字
		if (/[a-z]/.test(sValue)) modes++; //小写
		if (/[A-Z]/.test(sValue)) modes++; //大写  
		if (/\W/.test(sValue)) modes++; //特殊字符
		//逻辑处理
		switch (modes) {
			case 1:
				return 1;
				break;
			case 2:
				return 2;
				break;
			case 3:
			case 4:
				return sValue.length < 10 ? 3 : 4
				break;
		}
		return modes;
	}

	export default {
		data() {
			return {
				passWord: '',
				pwd: '',
				line: 0,
				passwordEye: true,
				forgetCode: '',
				androidIos: '',
				phone: ''
			}
		},
		onLoad(option) {
			this.forgetCode = option.forgetCode
			this.phone = option.phone
			console.log(this.phone);
			this.androidIos = getApp().globalData.androidIos
		},
		methods: {
			passwordEyeChange() {
				this.passwordEye = !this.passwordEye
			},
			confirm() {
				// var setPassword = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]){8,30}$/;
				// if (!setPassword.test((this.pwd))) {
				// 	uni.showToast({
				// 		title: '密码至少包含数字、字母和字符中的两类',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				if (this.pwd.length < 8) {
					uni.showToast({
						title: '密码长度不能小于8位',
						icon: 'none'
					})
				} else if (this.line < 2) {
					uni.showToast({
						title: '密码强度过低',
						icon: 'none'
					})
				} else {
					let data = {
						appId: this.androidIos,
						phone: this.phone,
						passWord: this.pwd,
						forgetCode: this.forgetCode
					}
					this.$httpNew
						.post('authApi/user/forgetUserPassword', data)
						.then(res => {
							console.log(res, '密码120');
							if (res == null) {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
								uni.navigateBack({
									delta:3
								})
							}
						}).catch(catchPass => {
							console.log(catchPass, '错误提示139');

						})
				}
			},
		},
		watch: {
			pwd(newValue, oldValue) {
				this.line = checkStrong(newValue);
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.cellBox {
		margin-top: 50rpx;
		width: 92%;
		margin-left: 4%;
	}

	.password {
		border-bottom: 1rpx solid #e0e0e0;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.password image {
		width: 36rpx;
		margin-right: 14rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;



		.title {
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 60rpx;
		}

		.title_content {
			margin-top: 30rpx;
		}

	}

	.password_auth {
		display: flex;
		flex-wrap: wrap;
		margin-left: 35%;
		width: 60%;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;

		.line {
			height: 5rpx;
			margin-right: 5%;
			width: 25%;
			background-color: #ccbcc3;
		}

		.lineback {
			height: 5rpx;
			margin-right: 5%;
			width: 25%;
			background-color: red;
		}
	}


	.confirm {
		border-radius: 50rpx;
		width: 80%;
		margin-left: 10%;
		height: 100rpx;
		display: flex;
		color: #fff;
		background-color: #b5001e;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
	}

	.centerA {
		position: relative;
		// top: 40rpx;
		left: 115rpx;
		width: 60%;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;

		>text:nth-child(2) {
			margin-left: 100rpx;
		}
	}
</style>
